<template>
  <view class="comnent-container">
    <scroll-view scroll-y class="main" id="main" :scroll-top="scrollTop" @scroll="scrollHandle">
      <view id="box">
        <view v-for="(i, index) in mdTextList" :key="index">
          <MarkdownRender v-if="i.type == 'gpt'" :content="i.content" :buttonClickMap="buttonClickMap" />
          <UserMsg v-else :content="i.content">
          </UserMsg>
        </view>
      </view>
    </scroll-view>
    <view class="info">点击获取源码</view>
    <view class="footer">
      <textarea v-model="msg" placeholder="请输入合法内容" placeholder-class="textarea-placeholder" />
      <view class="send-box">
        <view class="send" @click="sendHandle">发送</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import postSEE from '@/utils/postSEE'
import { ref, onMounted, nextTick } from 'vue'
const msg=ref('')
const main_h=ref()
const scrollTop=ref(0)
const mdTextList=ref([

])


function getMainHeight () {
  uni.createSelectorQuery()
    .select('#main')
    .boundingClientRect(data => {
      if(data) {
        main_h.value=data.height
        console.log('Main容器高度:', data.height);
      }
    })
    .exec();
}

// 获取box容器高度
function getBoxHeight () {
  uni.createSelectorQuery()
    .select('#box')
    .boundingClientRect(data => {
      if(data&&isScroll.value) {
        scrollTop.value=data.height
      }
    })
    .exec();
}
const isStart=ref(false)
const isScroll=ref(true)
const scrollHandle=() => {
  if(isScroll.value) {
    isScroll.value=false
  }
}

function generateUniqueId () {
  return Date.now().toString(36)+Math.random().toString(36).substr(2);
}


const sendHandle=() => {
  if(!msg.value) return
  const id=generateUniqueId()
  const content=msg.value
  mdTextList.value.push({
    type: "user",
    content
  })
  isScroll.value=true
  isStart.value=true
  msg.value=''
  postSEE({
    url: 'http://127.0.0.1:3100/api/chat', body: {
      message: content
    },
    onMessage (res) {
      console.log("res-----------------", res);
      if(res.status=='closed') {
        isScroll.value=true
        isStart.value=false
      }
      if(res.data&&res.data.message) {
        if(mdTextList.value[mdTextList.value.length-1].type==='user') {
          mdTextList.value.push({
            id: id,
            type: "gpt",
            content: res.data.message
          })
        } else if(mdTextList.value[mdTextList.value.length-1].id===id) {
          mdTextList.value[mdTextList.value.length-1].content+=res.data.message
        } else {
          mdTextList.value.push({
            id: id,
            type: "gpt",
            content: res.data.message
          })
        }
        nextTick(() => {
          getBoxHeight()
        })
      }
    }
  })
}


onMounted(() => {
  getMainHeight()
  getBoxHeight()
})


</script>

<style scoped lang="scss">
.comnent-container {
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 10rpx);
}

.input-box {
  border: 1px solid #ccc;
  padding: 8px;
  margin: 10px 0;
  border-radius: 4px;
  width: 100%;
}


.main {
  flex: 1;
  height: 1px;
}

.footer {
  border: 1px solid #ccc;
  margin: 4px;
  padding: 10px;

  textarea {
    width: 100%;
    border: none;
    outline: none;
    min-height: 90rpx;
    max-height: 180rpx;
    box-sizing: border-box;
  }

  .send-box {
    display: flex;
    align-items: center;

    .send {
      height: 60rpx;
      margin-left: auto;
      background-color: #00d2ca;
      color: #fff;
      border-radius: 3px;
      line-height: 60rpx;
      padding: 0 20rpx;
    }
  }
}

.info {
  text-align: center;
  background-color: #f5f5f5;
  padding: 5rpx;
  color: #00d2ca;
  width: 200rpx;
}
</style>
